// 媒体查询变量
$mediaSize: (
  miniScreen: 768px,
  mediumScreen: 992px,
  maxiScreen: 1200px,
);
$hiddenSomeSize: 960px;
$hiddenSomeSize: 768px;

// 颜色变量
$testBgColor: gold;
// 字体变量
$rootFontSize: 16px;

//主题变量
$nav: (
  // bcColor: #1f262c,
  bcColor: #272936,
  // color: #d6dcff,
  color: #9286f5,
  height: 7vh,
  fontSize: 1rem
);
$footer: (
  bcColor: #060f17,
  color: #fff,
);
$articleCard: (
  bcColor: #d6dcff,
  color: #fff,
  width: 8px,
);

//滚动条变量
$thumb: (
  color: #001529,
  width: 8px,
);

//其他变量
$content-side-margin: 30px;

//mixin
@mixin flexBetween($justify: space-between, $align: center) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

@mixin themeColor($bgColor: map-get($nav, color), $color: 'initial') {
  background-color: $bgColor;
  color: $color;
}

@mixin pagesLayout() {
  display: flex;
  justify-content: center;
  width: 100%;
}

//动画
.jello {
  &:hover {
    // animation: jello 0.5s infinite;
    animation: jello 0.5s 1;
  }
}
@keyframes jello {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.2, 0.8);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
